<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul v-for="item in talkList.talkList" :key="item.id">
            <li>{{ item.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">


import { reactive, ref } from 'vue'
import axios from 'axios'
import {useLoveTalk} from '@/store/loveTalk'

const talkList = useLoveTalk();

// console.log("@@",talkList);


import { nanoid } from 'nanoid'
// let talkList = ref([
//     { id: "01", title: "今天你有点怪,哪里怪,怪傻逼的！" },
//     { id: "02", title: "给你留了一块地,家里的二亩地" },
//     { id: "03", title: "草莓，蓝莓，蔓越莓，今天见你真倒霉" }
// ])

const getLoveTalk = async () => {
    // 下面这行的写法是连续结构赋值加重命名
    let { data:{content} } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    let obj = { id:nanoid(),title:content }
    console.log(obj);
    talkList.talkList.unshift(obj)
}
</script>

<style scoped>

.talk {
    background-color: chartreuse;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}

button {
    width: 200px;
    height: 30px;
    margin-right: 10px;
}
</style>